<template>
  <div class="max-h-[80vh]" :class="{ 'overflow-y-scroll': list.length > 0 }">
    <template v-if="list.length === 0">
      <Empty description="暂无未读消息" />
    </template>
    <div v-for="item in list" :key="item.id.id" class="flex flex-row py-4" v-else>
      <div class="pr-4 pt-1">
        <component :is="ICON[item.icon.icon]" class="text-lg" />
      </div>
      <div class="w-60">
        <h4>
          {{ item.subject }}
        </h4>
        <div>
          {{ item.text }}
        </div>
        <Button v-if="item.actionButtonConfig.enabled" @click="goToOtherPage(item)">
          {{ item.actionButtonConfig.text }}
        </Button>
      </div>
      <div class="px-4">
        <div>{{ formatTimeAgo(item.createdTime) }}</div>
        <Popover content="标记为已读">
          <CheckCircleOutlined class="text-lg" @click="handleRead(item)" />
        </Popover>
      </div>
    </div>
  </div>
  <div>
    <Button type="text" :block="true" @click="handleGoNotification">查看全部</Button>
  </div>
</template>

<script lang="ts" setup>
  import { Popover, Button, Empty } from 'ant-design-vue';
  import {
    InfoCircleOutlined,
    WarningOutlined,
    CheckCircleOutlined,
    BellOutlined,
  } from '@ant-design/icons-vue';
  import { formatTimeAgo, ListItem as ListItemType } from './data';
  import { useGo } from '/@/hooks/web/usePage';

  const ICON = {
    info: InfoCircleOutlined,
    notifications: BellOutlined,
    warning: WarningOutlined,
  };

  const props = defineProps({
    list: {
      type: Array as PropType<ListItemType[]>,
      default: () => [],
    },
  });
  const emit = defineEmits(['read']);

  const go = useGo();

  const handleRead = (item: Recordable) => {
    emit('read', item.id.id);
  };

  // 查看全部跳转
  const handleGoNotification = () => {
    go('/tb-notification/index');
  };

  // 跳转其他页面
  function goToOtherPage(data: any) {
    let paramsId = data.actionButtonConfig.link.split('/')[2];
    let paramsName = data.actionButtonConfig.link.split('/')[1];
    let pathName = paramsName.toLowerCase().replace(/^\w/, (c) => c.toUpperCase());
    if (pathName === 'Rulechains') {
      go(`/tb-rule/TbrulePage/rule-chain/${paramsId}`);
    } else {
      go({
        name: pathName,
        params: {
          paramsId,
          entityName: data.info.entityName,
          key: '通知中心',
        },
      });
    }
  }
</script>

<style lang="less" scoped></style>
